<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-guard-member {
            padding: 40px;
        }

        .page-guard-member-title {
            margin-bottom: 40px;
        }

        .page-guard-member-card {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 95px;
            -ms-flex: 0 0 95px;
            flex: 0 0 95px;
            height: 124px;
            background: #fff;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            position: relative;
            padding-top: 60px;
            margin-bottom: 36px;
        }

        .page-guard-member-card.add .avatar {
            background-color: #fec901;
            text-align: center;
        }

        .page-guard-member-card-list {
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .page-guard-member-card .avatar {
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: -20px;
            width: 56px;
            height: 56px;
            background-color: #fff;
            border-radius: 100%;
            overflow: hidden;
            border: 4px solid #fff;
        }

        .page-guard-member-card .avatar img {
            width: 48px;
            height: 48px;
            display: block;
        }

        .page-guard-member-card .avatar p {
            font-size: 38px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 1px 1px 0px rgba(145, 124, 24, 0.49);
            position: relative;
            top: -2px;
            margin: 0 auto;
        }

        .page-guard-member-card .name,
        .page-guard-member-card .title,
        .page-guard-member-card .class {
            line-height: 1.55555556em;
        }

        .page-guard-member-add-member {
            width: 100%;
            background: #fec901;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            width: 320px;
            height: auto;
            padding: 20px 28px;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div class="page-main">
        <div class="page-main-container">
            <div class="child-view page-guard-member">
                <div flex="cross:bottom" class="ui-pd-l-10 page-guard-member-title"><span
                        class="ui-text-28">守护成员</span><span class="ui-text-18">（共{{.memberNum}}人）</span></div>
                <div flex="main:justify" class="page-guard-member-card-list">
                    {{range .memberList}}
                        <div class="page-guard-member-card">
                            <div flex="main:justify cross:center" class="avatar">
                                <img src="" alt="" srcset="">
                            </div>
                            <div class="name ui-text-10 ui-pd-l-17">姓名：{{.RealName}}</div>
                            <div class="class ui-text-10 ui-pd-l-17">班级：{{.Class.Name}}</div>
                        </div>
                    {{end}}
                    <div class="add page-guard-member-card" onclick="addMember()">
                        <div flex="main:justify cross:center" class="avatar">
                            <p>+</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/html" id="add-member-tpl">
    <div class="page-guard-member-add-member">
        <form id="data-form">
            {{.xsrfdata}}
            <div class="m-input-wrapper m-input-has-floating-label">
                <div flex="" class="m-input m-input-text m-input-floating-label">
                    <span class="m-input-label">姓名：</span>
                    <input type="text" id="real_name" name="real_name" placeholder="">
                </div>
            </div>
            <div class="ui-mg-t-10 m-input-wrapper m-input-has-floating-label">
                <div flex="" class="m-input m-input-text m-input-floating-label">
                    <span class="m-input-label">身份证号：</span>
                    <input type="text" id="id_card" name="id_card" placeholder="">
                </div>
            </div>
        </form>
        <div onclick="doSubmit()" class="m-button m-button-default m-button-block" style="width: 90px; margin: 18px auto 0px;">提交</div>
    </div>
</script>

<script>

    var canSubmit = true,
        idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

    var popup = new MPopup({
        content: ``
    });

    function doSubmit() {

        if ($('#real_name').val().length <= 0) {
            layer.open({content: '请输入姓名', skin: 'msg', time: 2});
            return false;
        }
        var idCard = $('#id_card').val();
        if (idCard.length <= 0) {
            layer.open({content: '请输入身份证号', skin: 'msg', time: 2});
            return false;
        }
        if (!idcardReg.test(idCard)) {
            layer.open({content: '请输入正确的身份证号', skin: 'msg', time: 2});
            return false;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "parent.StudentController.AddProtectMember"}}',
            type: 'POST',
            data: $('#data-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "parent.StudentController.ProtectMember"}}';
                    }, 1000);
                }

            }
        });

    }

    function addMember() {
        popup.show($('#add-member-tpl').html());
    }

</script>

</html>